<template>
  <div class="xdfeizhi-form">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="公司名称" prop="companyName">
        <el-input v-model="form.companyName" :disabled="isView" />
      </el-form-item>
      <el-form-item label="申请部门" prop="applicationDepartment">
        <el-input v-model="form.applicationDepartment" :disabled="isView" />
      </el-form-item>
      <el-form-item label="申请日期" prop="applicationDate">
        <el-date-picker
          v-model="form.applicationDate"
          type="date"
          placeholder="选择日期"
          :disabled="isView"
        />
      </el-form-item>
      <el-form-item label="文件名称" prop="fileName">
        <el-input v-model="form.fileName" :disabled="isView" />
      </el-form-item>
      <el-form-item label="文件编号" prop="fileNumber">
        <el-input v-model="form.fileNumber" :disabled="isView" />
      </el-form-item>
      <el-form-item label="版本" prop="version">
        <el-input v-model="form.version" :disabled="isView" />
      </el-form-item>
      <el-form-item label="申请原因" prop="applicationReason">
        <el-input
          v-model="form.applicationReason"
          type="textarea"
          :rows="3"
          :disabled="isView"
        />
      </el-form-item>

      <div class="revision-list">
        <div class="revision-header">
          <h3>修订内容</h3>
          <el-button v-if="!isView" type="primary" size="mini" @click="addRevision">
            新增修订记录
          </el-button>
        </div>
        <div
          v-for="(revision, index) in form.revisions"
          :key="index"
          class="revision-item"
        >
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item :label="'原文件内容 ' + (index + 1)" :prop="'revisions.' + index + '.originalContent'">
                <el-input
                  v-model="revision.originalContent"
                  type="textarea"
                  :rows="4"
                  :disabled="isView"
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item :label="'修订内容 ' + (index + 1)" :prop="'revisions.' + index + '.revisedContent'">
                <el-input
                  v-model="revision.revisedContent"
                  type="textarea"
                  :rows="4"
                  :disabled="isView"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="!isView" :span="2">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeRevision(index)"
              />
            </el-col>
          </el-row>
        </div>
      </div>

      <el-form-item label="批准" prop="approver">
        <el-input v-model="form.approver" :disabled="isView" />
      </el-form-item>
      <el-form-item label="部门意见" prop="departmentOpinion">
        <el-input
          v-model="form.departmentOpinion"
          type="textarea"
          :rows="3"
          :disabled="isView"
        />
      </el-form-item>
      <el-form-item label="审核" prop="reviewer">
        <el-input v-model="form.reviewer" :disabled="isView" />
      </el-form-item>
      <el-form-item label="申请人" prop="applicant">
        <el-input v-model="form.applicant" :disabled="isView" />
      </el-form-item>

      <el-form-item>
        <el-button @click="handleCancel">取消</el-button>
        <el-button v-if="!isView" type="primary" @click="handleSubmit">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { saveXdfeizhi, updateXdfeizhi } from '@/api/xdfeizhi'

export default {
  name: 'XdfeizhiForm',
  props: {
    mode: {
      type: String,
      required: true
    },
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        companyName: '',
        applicationDepartment: '',
        applicationDate: '',
        fileName: '',
        fileNumber: '',
        version: '',
        applicationReason: '',
        approver: '',
        departmentOpinion: '',
        reviewer: '',
        applicant: '',
        revisions: []
      },
      rules: {
        companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        applicationDepartment: [{ required: true, message: '请输入申请部门', trigger: 'blur' }],
        applicationDate: [{ required: true, message: '请选择申请日期', trigger: 'change' }],
        fileName: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
        fileNumber: [{ required: true, message: '请输入文件编号', trigger: 'blur' }],
        version: [{ required: true, message: '请输入版本', trigger: 'blur' }],
        applicationReason: [{ required: true, message: '请输入申请原因', trigger: 'blur' }],
        'revisions.*.originalContent': [{ required: true, message: '请输入原文件内容', trigger: 'blur' }],
        'revisions.*.revisedContent': [{ required: true, message: '请输入修订内容', trigger: 'blur' }]
      }
    }
  },
  computed: {
    isView() {
      return this.mode === 'view'
    }
  },
  watch: {
    formData: {
      handler(val) {
        this.form = { ...this.form, ...val }
      },
      immediate: true
    }
  },
  methods: {
    addRevision() {
      this.form.revisions.push({
        originalContent: '',
        revisedContent: ''
      })
    },
    removeRevision(index) {
      this.form.revisions.splice(index, 1)
    },
    handleCancel() {
      this.$emit('cancel')
    },
    async handleSubmit() {
      try {
        await this.$refs.form.validate()
        if (this.mode === 'create') {
          await saveXdfeizhi(this.form)
        } else {
          await updateXdfeizhi(this.form.id, this.form)
        }
        this.$message({
          type: 'success',
          message: '保存成功!'
        })
        this.$emit('submit')
      } catch (error) {
        if (error.message) {
          this.$message.error(error.message)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.xdfeizhi-form {
  padding: 20px;

  .revision-list {
    margin: 20px 0;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 20px;

    .revision-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h3 {
        margin: 0;
      }
    }

    .revision-item {
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px dashed #dcdfe6;

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }
}
</style> 